<template>
  <text-scroll
    ref="seamlessScroll"
    :data="evidenceInfo.totalArr"
    class="warp allnav"
    :class-option="classOption"
    @ScrollDiffEnd="ScrollDiffEnd"
  >
    <ul class="item">
      <li v-for="(item, index) in evidenceInfo.totalArr" :key="index">
        <span class="title" v-text="item.name" />
        <span class="date" v-text="item.content" />
      </li>
    </ul>
  </text-scroll>
</template>

<script>
import { getEvidenceInfoData } from 'api/big-screen'

// import vueSeamlessScroll from 'vue-seamless-scroll'
import TextScroll from 'components/TextScroll/TextScroll'

export default {
  name: 'EvidenceScroll',
  components: {
    // vueSeamlessScroll
    TextScroll
  },
  data() {
    return {
      evidenceInfo: {
        totalArr: [], // 请求的总数据
        isFirstLoad: true, // 是否第一次加载
        isLoadData: false // 是否可以加载数据
      },
      classOption: {
        singleHeight: 4, // 此属性已经被魔改为vh，如需改回请在组件中搜索  ${this.yPos}vh
        waitTime: 2000,
        limitMoveNum: 6,
        // autoPlay: false,
        switchDelay: 500,
        scrollEndNum: 10 // 在列表滚动倒数第n条之前发射ScrollDiffEnd事件 ,需要注意的是请求数据的条数不能小于当前值
      }
    }
  },
  mounted() {
    this._getEvidenceInfoData()
  },
  methods: {
    _getEvidenceInfoData() {
      getEvidenceInfoData().then(res => {
        let data = res
        this.evidenceInfo.totalArr = this.evidenceInfo.totalArr.concat(data)
        if (this.evidenceInfo.isFirstLoad === true) {
          // this.$refs.seamlessScroll._startAnimation()
          this.evidenceInfo.isFirstLoad = false
        }
        // evidenceInfo.isLoadData = true
        //
        // if (evidenceInfo.isFirstLoad === true) { // 只有第一次加载，才需要设置Echarts
        // startEvidenceAnimate()
        //   evidenceInfo.isFirstLoad = false
        // }
      })
    },
    ScrollDiffEnd() {
      // console.log('滚动结束了')
      // this._getEvidenceInfoData()
      // this.$refs.seamlessScroll.reset()
    }
  }
}
</script>

<style lang="scss" scoped>
.warp {
  //height: 270px;
  //width: 360px;
  margin: 0 auto;
  margin: -0.5vw -1vw -2vw -0.75vw;
  overflow: hidden;

  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;

    li,
    a {
      height: 4vh;
      line-height: 4vh;
      display: flex;
      justify-content: space-between;
      font-size: 0.8vw;
      padding-left: 1vw;
      color: #32D3EB;
    }
    //li:nth-child(2n+1) {
    //  background-color: #1b2b51;
    //  color: #32D3EB;
    //}

    li:hover {
      background: #395971 !important;
    }

    li span{
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      color: #3eb4c5;
    }
    li span:first-child {
      flex-basis: 5vw;
    }
    li span:last-child {
      flex: 1;
    }

  }
}
</style>
